<template>
  <div>
    <h1>Counter</h1>
    <div>count: {{ count }} <button @click="addCount">+1</button></div>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  // props: ['count'] // 这种数组的方式定义属性，不能指定详细属性配置，比如：默认值、数据类型、是否必传、自定义校验等等。。。
  props: {
    count: {
      type: Number,
      required: true,
      default: 0,
    },
  },
  methods: {
    addCount() {
      // 想要将count + 1 ，咋办？count从哪来？ 从外界传过来的，能直接改吗？直接改了，页面会重新渲染吗？不会，为什么不会啊？因为Vue的规定就是属性是只读的，不能修改，违反了单向数据流
      // this.count++
      // this.$emit('changeCount', this.count + 1)
      this.$emit('update:count', this.count + 1)
    },
  },
}
</script>
